<!-- 活动时间  - 显示七条 -->
<template>
  <view class="date">
    <view class="date_groups hide-scroll border-top border-bottom">
      <view
        class="date_groups_cell d-flex"
        v-for="(item, index) in 5"
        :key="index"
        :class="{
          actived: checkDay == getDay(index),
          'border-left': checkDay == getDay(index) && index != 0,
          'border-right': checkDay == getDay(index) && index != 4,
		  
        }"
        @click="dateTime(getDay(index))"
      >
        {{ getWeek(getDay(index)) }}
        <br />
        <text class="intel-one-mono-regular">{{ getTime(index) }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getDay, getWeek } from "@/util/index.js";
let props = defineProps({
  startTime: {
    type: String,
    default: "",
  },
  endTime: {
    type: String,
    default: "",
  },
  checkDay: {
    type: String,
    default: "",
  },
});
let emit = defineEmits(["update:checkDay"]);

function getTime(index) {
  let time = getDay(index);
  return time ? time.split("-")[1] + "/" + time.split("-")[2] : "";
}

function isClick(time){
	if(time > props.startTime && time< props.endTime) {
		return true;
	}
	return false;
}

function dateTime(date){
	if(isClick(date)){
		emit('update:checkDay', date)
	}
	
}
</script>

<style lang="scss" scoped>
.date {
  background-color: #ffffff;
  &_groups {
    // white-space: nowrap;
    // overflow-y: hidden;
    // overflow-x: scroll;
    // -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: 92rpx;
    align-content: space-between;
    justify-content: space-between;
    text-align: center;
    &_cell {
      // width: 144rpx;
      // height: 92rpx;
      // padding: 22rpx;
      padding-top: 14rpx;
      display: inline-block;
      font-size: 26rpx;
      text-align: center;
    }
    &_cell,
    &_cell > text {
      color: var(--grey-text);
    }
    &_cell.actived,
    &_cell.actived > text {
      color: var(--default-text);
    }
  }
}
</style>
